<template>
    <div class="sea-page-row">
        <div class="width-25 box" style="height: 100%;box-sizing: border-box;">
            <el-button type="primary" class="btn-block">Back To Inbox</el-button>
            <div class="text-block border-bottom">
                <strong><i class="fa fa-fw fa-inbox"></i> Inbox：</strong>
                <span class="badge bg-orange pull-right">1</span>
            </div>
            <div class="text-block border-bottom">
                <strong><i class="fa fa-fw fa-envelope-o"></i> Sent：</strong>
                <span class="badge bg-orange pull-right">4</span>
            </div>
            <div class="text-block border-bottom">
                <strong><i class="fa fa-fw fa-file-text-o"></i> Drafts：</strong>
                <span class="badge bg-gray pull-right">32</span>
            </div>
            <div class="text-block border-bottom">
                <strong><i class="fa fa-fw fa-filter"></i> Junk：</strong>
                <span class="badge bg-gray pull-right">1</span>
            </div>
            <div class="text-block border-bottom">
                <strong><i class="fa fa-fw fa-trash-o"></i> Trash：</strong>
                <span class="badge bg-gray pull-right">2</span>
            </div>
        </div>


        <div class="page-body box">
            <div class="flex-column-gap" style="height: 100%">
                <div>
                    <h4 class="pull-left">Read Mail</h4>
                    <sea-small-pagination class="pull-right" total="100"></sea-small-pagination>
                </div>

                <h5 class="align-center">Message Subject Is Placed Here</h5>
                <div>From: help@example.com15 <span class="pull-right">Feb. 2016 11:03 PM</span></div>

                <div class="flex-body">
                    <div class="box-item" style="text-align: center">
                        <el-button-group>
                            <el-button><i class="fa fa-fw fa-trash-o" title="Delete"></i></el-button>
                            <el-button><i class="fa fa-fw fa-reply" title="Replay"></i></el-button>
                            <el-button><i class="fa fa-fw fa-share" title="Forward"></i></el-button>
                        </el-button-group>
                    </div>
                    <article class="mail-content">
                        <h6>少年闰土</h6>
                        <p>
                            深蓝的天空中挂着一轮金黄的圆月，下面是海边的沙地，都种着一望无际的碧绿的西瓜。其间有一个十一二岁的少年，
                            项带银圈，手捏一柄钢叉，向一匹猹尽力的刺去。那猹却将身一扭，反从他的胯下逃走了。
                        </p>
                        <p>
                            这少年便是闰土。我认识他时，也不过十多岁，离现在将有三十年了；那时我的父亲还在世，家景也好，我正是一个少爷。
                            那一年，我家是一件大祭祀的值年。这祭祀，说是三十多年才能轮到一回，所以很郑重。正（zhēng）月里供像，供品很多，祭器很讲究，
                            拜的人也很多，祭器也很要防偷去。我家只有一个忙月（我们这里给人做工的分三种：整年给一定人家做工的叫长工；
                            按日给人做工的叫短工；自己也种地，只在过年过节以及收租时候来给一定的人家做工的称忙月），忙不过来，他便对父亲说，
                            可以叫他的儿子闰土来管祭器的。
                        </p>
                    </article>
                </div>
                <div class="flex-footer">
                    <div class="pull-left">
                        <el-button><i class="fa fa-fw fa-trash-o"></i>Delete</el-button>
                    </div>
                    <div class="pull-right">
                        <el-button><i class="fa fa-fw fa-reply"></i>Replay</el-button>
                        <el-button><i class="fa fa-fw fa-share"></i>Forward</el-button>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "read",
    data() {
        return {}
    }
}
</script>

<style scoped>
.mail-content h6, h5, h4, h3, h2, h1, p {
    margin: 0 0 6px;
}
</style>
